<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>小米</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/reset.css">
</head>

<body>
    <!-- 头部 -->
    <header class="header">
        <div class="nav">
            <div class="nav-left">
                <ul>
                    <a href="#">小米商城</a>
                    <a href="#">MIUI</a>
                    <a href="#">loT</a>
                    <a href="#">云服务</a>
                    <a href="#">金融</a>
                    <a href="#">有品</a>
                    <a href="#">小爱开放平台</a>
                    <a href="#">企业团购</a>
                    <a href="#">直播</a>
                    <a href="#">资质执照</a>
                    <a href="#">协议规则</a>
                    <a href="#">下载app</a>
                    <a href="#">Select Location</a>
                </ul>
                <div class="nav-right">
                    <ul>
                        <a href="./login.html">登录</a>
                        <a href="./register.html">注册</a>
                        <a href="#">信息通知</a>
                        <span class="wrp">
                            <img src="images/xm (1).jpg" alt=""> 购物车（0）</span>
                    </ul>
                </div>
            </div>
        </div>
    </header>
    <!-- 首页 -->
    <main class="main">
        <div class="main-nav">
            <div class="main-wrp">
                <!-- logo -->
                <div class="container">
                    <h1>
                        <img src="images/logo.jpg" alt="">
                    </h1>

                    <!-- 菜单 -->
                    <ul>
                        <a href="Detail.html">
                            小米手机
                            <div class="xs">
                                <div class="xiao"></div>
                                <div class="xiao-1">
                                    <img src="images/images/小米10.jpg">
                                    <p>小米10Pro</p>
                                </div>
                                <div class="xiao-1">
                                    <img src="images/images/小米cc9.jpg">
                                    <p>小米cc9</p>
                                </div>
                                <div class="xiao-1">
                                    <img src="images/images/小米10.jpg">
                                    <p>小米10Pro</p>
                                </div>
                                <div class="xiao-1">
                                    <img src="images/images/小米cc9.jpg">
                                    <p>小米cc9</p>
                                </div>
                                <div class="xiao-1">
                                    <img src="images/images/小米.jpg">
                                    <p>小米8989</p>
                                </div>
                               
                            </div>
                        </a>

                        <a href="#">Redmi红米
                            <div class="xs">
                                <div class="xiao"></div>
                                <div class="xiao-1">
                                    <img src="images/images/小米10.jpg">
                                    <p>小米10Pro</p>
                                </div>
                                <div class="xiao-1">
                                    <img src="images/images/小米cc9.jpg">
                                    <p>小米cc9</p>
                                </div>
                                <div class="xiao-1">
                                    <img src="images/images/小米10.jpg">
                                    <p>小米10Pro</p>
                                </div>
                                <div class="xiao-1">
                                    <img src="images/images/小米cc9.jpg">
                                    <p>小米cc9</p>
                                </div>
                                <div class="xiao-1">
                                    <img src="images/images/小米.jpg">
                                    <p>小米8989</p>
                                </div>
                                <div class="xiao-1">
                                    <img src="images/images/小米cc9.jpg">
                                    <p>小米cc9</p>
                                </div>
                            </div>
                        </a>
                        <a href="#">电视</a>
                        <a href="#">笔记本</a>
                        <a href="#">家电</a>
                        <a href="#">路由器</a>
                        <a href="#">智能硬件</a>
                        <a href="#">服务</a>
                        <a href="#">社区</a>
                    </ul>
                    <span>
                        <input type="text" placeholder="小米9Pro 5G">
                    </span>
                </div>
                <!-- 导航+轮播 -->
                <div class="sub-nav">
                    <div class="title">
                        <li>手机电话卡
                            <a>&gt;</a>
                        </li>
                        <li>耳机音响
                            <a>&gt;</a>
                        </li>
                        <li>出门穿戴
                            <a>&gt;</a>
                        </li>
                        <li>电视盒子
                            <a>&gt;</a>
                        </li>
                        <li>耳机音响
                            <a>&gt;</a>
                        </li>
                        <li>出门穿戴
                            <a>&gt;</a>
                        </li>
                        <li>耳机音响
                            <a>&gt;</a>
                        </li>
                        <li>出门穿戴
                            <a>&gt;</a>
                        </li>
                        <li>耳机音响
                            <a>&gt;</a>
                        </li>
                        <li>出门穿戴
                            <a>&gt;</a>
                        </li>
                    </div>
                    <!-- 轮播 -->
                    <Carousel class="Carousel">
                        <img src="images/xm (4).jpg" alt="">
                    </Carousel>
                    <div class="home">
                        <ul></ul>
                        <img src="images/xm (5).jpg" alt="">
                        <img src="images/xm (6).jpg" alt="">
                        <img src="images/xm (7).jpg" alt="">
                    </div>
                </div>
            </div>
        </div>
    </main>
    <!-- 内容 -->
    <content class="content">
        <div class="content-nav">
            <div class="content-wrap">
                <div class="msg">
                    <b>小米闪购</b>
                    <span>></span>
                    <span>
                        <</span>
                </div>
                <div class="main-tab">
                    <h2>
                        <div class="round">14:00场</div>
                        <img src="images/xm (20).jpg" alt="">
                        <div class="round-nav">距离结束还有</div>
                        <div class="time">
                            <span>02</span>
                            <i>:</i>
                            <span>19</span>
                            <i>:</i>
                            <span>27</span>
                        </div>
                    </h2>
                    <h3>
                        <img src="images/xm (17).jpg" alt="">
                        <div class="wrapper">
                            <strong>米家自动洗手机套装 莎莉定...</strong>
                            <i>随时释放“超萌力”</i>
                            <p>109元</p>
                        </div>
                    </h3>
                    <h4>
                        <img src="images/xm (18).jpg" alt="">
                        <div class="wrapper">
                            <strong>米家自动洗手机套装 莎莉定...</strong>
                            <i>随时释放“超萌力”</i>
                            <p>109元</p>
                        </div>
                    </h4>
                    <h5>
                        <img src="images/xm (19).jpg" alt="">
                        <div class="wrapper">
                            <strong>米家自动洗手机套装 莎莉定...</strong>
                            <i>随时释放“超萌力”</i>
                            <p>109元</p>
                        </div>
                    </h5>
                    <h6>
                        <img src="images/xm (16).jpg" alt="">
                        <div class="wrapper">
                            <strong>米家自动洗手机套装 莎莉定...</strong>
                            <i>随时释放“超萌力”</i>
                            <p>109元</p>
                        </div>
                    </h6>
                </div>
                <!-- 单行 -->
                <div class="main-wrap">
                    <img src="images/hengpan_03.jpg" alt="">
                </div>
                <div class="msg-nav">
                    <p>手机</p>
                    <li>></li>
                    <strong>查看全部</strong>
                </div>
                <!-- 手机 -->
                <div class="title-nav">
                    <div class="title-wrap">
                        <img src="images/xm (23).jpg" alt="">
                    </div>
                    <div class="title-con">
                        <li>
                            <img src="images/xm (24).jpg" alt="">
                            <div class="wrapper">
                                <strong>Redmi K30</strong>
                                <i>随时释放“超萌力”</i>
                                <p>109元</p>
                            </div>
                        </li>
                        <li>
                            <img src="images/xm (25).jpg" alt="">
                            <div class="wrapper">
                                <strong>Redmi K30</strong>
                                <i>随时释放“超萌力”</i>
                                <p>109元</p>
                            </div>
                        </li>
                        <li>
                            <img src="images/xm (26).jpg" alt="">
                            <div class="wrapper">
                                <strong>Redmi K30</strong>
                                <i>随时释放“超萌力”</i>
                                <p>109元</p>
                            </div>
                        </li>
                        <li>
                            <img src="images/xm (30).jpg" alt="">
                            <div class="wrapper">
                                <strong>Redmi K30</strong>
                                <i>随时释放“超萌力”</i>
                                <p>109元</p>
                            </div>
                        </li>
                        <li>
                            <img src="images/xm (24).jpg" alt="">
                            <div class="wrapper">
                                <strong>Redmi K30</strong>
                                <i>随时释放“超萌力”</i>
                                <p>109元</p>
                            </div>
                        </li>
                        <li>
                            <img src="images/xm (25).jpg" alt="">
                            <div class="wrapper">
                                <strong>Redmi K30</strong>
                                <i>随时释放“超萌力”</i>
                                <p>109元</p>
                            </div>
                        </li>
                        <li>
                            <img src="images/xm (24).jpg" alt="">
                            <div class="wrapper">
                                <strong>Redmi K30</strong>
                                <i>随时释放“超萌力”</i>
                                <p>109元</p>
                            </div>
                        </li>
                        <li>
                            <img src="images/xm (30).jpg" alt="">
                            <div class="wrapper">
                                <strong>Redmi K30</strong>
                                <i>随时释放“超萌力”</i>
                                <p>109元</p>
                            </div>
                        </li>
                    </div>
                </div>
                <!--  -->
                <div class="status">
                    <img src="images/xm (32).jpg" alt="">
                </div>
            </div>
            <div class="service">
                <div class="service-nav">
                    <div class="fooder-service">
                        <li>
                            <img src="images/banshou.jpg" alt="">
                            <a href="#">预约维修服务</a>
                        </li>
                        <li>
                            <img src="images/banshou.jpg" alt="">
                            <a href="#">预约维修服务</a>
                        </li>
                        <li>
                            <img src="images/banshou.jpg" alt="">
                            <a href="#">预约维修服务</a>
                        </li>
                        <li>
                            <img src="images/banshou.jpg" alt="">
                            <a href="#">预约维修服务</a>
                        </li>
                        <li>
                            <img src="images/banshou.jpg" alt="">
                            <a href="#">预约维修服务</a>
                        </li>
                    </div>
                    <div class="guild">
                        <div class="guild-nav">
                            <div class="col-links">
                                <dt>帮助中心</dt>
                                <p>账户管理</p>
                                <p>账户管理</p>
                                <p>账户管理</p>
                            </div>
                            <div class="col-links">
                                <dt>帮助中心</dt>
                                <p>账户管理</p>
                                <p>账户管理</p>
                                <p>账户管理</p>
                            </div>
                            <div class="col-links">
                                <dt>帮助中心</dt>
                                <p>账户管理</p>
                                <p>账户管理</p>
                                <p>账户管理</p>
                            </div>
                            <div class="col-links">
                                <dt>帮助中心</dt>
                                <p>账户管理</p>
                                <p>账户管理</p>
                                <p>账户管理</p>
                            </div>
                            <div class="col-links">
                                <dt>帮助中心</dt>
                                <p>账户管理</p>
                                <p>账户管理</p>
                                <p>账户管理</p>
                            </div>
                            <div class="col-links">
                                <dt>帮助中心</dt>
                                <p>账户管理</p>
                                <p>账户管理</p>
                                <p>账户管理</p>
                            </div>
                            <div class="col-right">
                                <p class="phone">400-100-5678</p>
                                <b>周一至周日 8:00-18:00
                                    <br>（仅收市话费）</b>
                                <div class="bnt">
                                    <img src="images/weixin.jpg" alt="">
                                    <a href="#">人工服务</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 版权 -->

                </div>

            </div>
            <div class="container-wrap">
                <div class="container-nav">
                    <img src="images/logo.jpg" alt="">
                </div>
                <ul>
                    <a href="#">小米商城</a>
                    <a href="#">MIUI</a>
                    <a href="#">loT</a>
                    <a href="#">云服务</a>
                    <a href="#">金融</a>
                    <a href="#">有品</a>
                    <a href="#">小爱开放平台</a>
                    <a href="#">企业团购</a>
                    <a href="#">直播</a>
                    <a href="#">资质执照</a>
                    <a href="#">协议规则</a>
                    <a href="#">下载app</a>
                    <a href="#">Select Location</a>
                </ul>
                <br>
                <p>© mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2020]0276-042号</p>
                <p>（京）网械平台备字（2018）第00005号 互联网药品信息服务资格证 (京)-非经营性-2014-0090 营业执照 医疗器械质量公告</p>
                <p>增值电信业务许可证 网络食品经营备案（京）【2018】WLSPJYBAHF-12 食品经营许可证</p>
                <p>违法和不良信息举报电话：185-0130-1238 知识产权侵权投诉 本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
                <img src="images/aq_03.jpg" alt="">
            </div>
            <div class="fooder-nav">
                <P>探索黑科技，小米为发烧而生</P>
            </div>
    </content>

</body>

</html>